<h1>{{ title }}</h1>

<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title"><i class="tlp-pane-title-icon fa fa-list"></i> {{ title }}</h1>
        </div>
        <section class="tlp-pane-section">
            <div class="tlp-table-actions">
                <button
                    type="button"
                    class="tlp-button-primary tlp-table-actions-element"
                    id="add-project-category-button"
                >
                    <i class="fa fa-plus tlp-button-icon"></i> {{ add_trove_cat }}
                </button>
            </div>
            {{> trovecat-modal-add }}
            <table class="tlp-table">
                <thead>
                <tr>
                    <th>{{ header_name }}</th>
                    <th>{{ header_description }}</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                {{# trovecats }}
                    <tr>
                        <td>
                            <div style="margin: 0 0 0 {{ spacing }}px">
                                {{# has_spacing }} &#8627;  {{/ has_spacing }}
                                {{ fullname }}
                            </div>
                        </td>
                        <td>{{ description }}</td>
                        <td class="tlp-table-cell-actions">
                            <button
                                type="button"
                                class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline trovecats-edit-button"
                                data-modal-id="trove-cat-edit-{{ trove_cat_id }}"
                            >
                                <i class="fa fa-pencil tlp-button-icon"></i> {{ edit_button }}
                            </button>
                            {{> trovecat-modal-edit }}
                            <button
                                type="button"
                                class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger trovecats-delete-button
                                tlp-button-outline" data-modal-id="trove-cat-delete-{{ trove_cat_id }}">
                                <i class="fa fa-trash tlp-button-icon"></i> {{ delete_button }}
                            </button>
                            {{> trovecat-modal-delete }}
                        </td>
                    </tr>
                {{/ trovecats }}
                </tbody>
                <tfoot>
            </table>
        </section>
    </div>
</section>
